<template>
  <customHeader
    title="个人信息"
    :showBack="false"
    :backgroundGradient="'linear-gradient(135deg,#4a90e2,#67b8f7)'"
  />
  <view class="mine-container">
    <!-- 数据统计区 -->
    <view class="stats-section">
      <view class="stats-header">
        <image
          class="shop-avatar"
          :src="
            userInfo.picture ||
            'https://cphimg.leyoo888.com/dev/upload/supplier/2025-05-06/1746528989179.png'
          "
          mode="cover"
        />
        <view class="shop-info">
          <view class="shop-name">{{ userInfo.shop?.name }}</view>
          <view class="shop-role">{{ userInfo.mobile }}</view>
          <view class="shop-role">店铺管理员</view>
        </view>
      </view>
      <view class="stats-data">
        <view class="stats-item">
          <view class="stats-num">{{
            formatNumber(shopStatisInfo?.today_order)
          }}</view>
          <view class="stats-label">今日订单数</view>
        </view>
        <view class="stats-item">
          <view class="stats-num">{{
            formatNumber(shopStatisInfo?.yesterday_order)
          }}</view>
          <view class="stats-label">昨日订单数</view>
        </view>
        <view class="stats-item">
          <view class="stats-num">{{
            formatNumber(shopStatisInfo?.same_month_order)
          }}</view>
          <view class="stats-label">当月订单数</view>
        </view>
        <view class="stats-item">
          <view class="stats-num">{{
            formatNumber(shopStatisInfo?.total_order)
          }}</view>
          <view class="stats-label">总订单数</view>
        </view>
      </view>
      <view class="stats-money">
        <view class="money-item">
          <view class="money-num">{{
            formatNumber(shopStatisInfo?.today_price)
          }}</view>
          <view class="money-label">今日成交金额</view>
        </view>
        <view class="money-item">
          <view class="money-num">{{
            formatNumber(shopStatisInfo?.yesterday_price)
          }}</view>
          <view class="money-label">昨日成交金额</view>
        </view>
        <view class="money-item">
          <view class="money-num">{{
            formatNumber(shopStatisInfo?.same_month_price)
          }}</view>
          <view class="money-label">当月成交金额</view>
        </view>
        <view class="money-item">
          <view class="money-num">{{
            formatNumber(shopStatisInfo?.total_price)
          }}</view>
          <view class="money-label">成交金额</view>
        </view>
      </view>
      <view class="stats-money">
        <view class="money-item">
          <view class="money-num">{{
            formatNumber(shopStatisInfo?.settlement_price)
          }}</view>
          <view class="money-label">已结款金额</view>
        </view>
        <view class="money-item">
          <view class="money-num">{{
            formatNumber(shopStatisInfo?.un_settlement_price)
          }}</view>
          <view class="money-label">未结款金额</view>
        </view>
      </view>
    </view>

    <!-- 我的服务区域 -->
    <view class="my-services">
      <view class="section-title">我的服务</view>
      <view class="service-items">
        <view
          class="service-item"
          @tap="navigateTo('/pagesShop/order/orderlist')"
          v-if="checkRoles('wx_storeToSupplierSingle')"
        >
          <text class="service-icon">&#xe62f;</text>
          <text class="service-name">采购单</text>
        </view>
        <view
          class="service-item"
          @tap="navigateTo('/pagesShop/address/storeAddresslist')"
          v-if="checkRoles('wx_address')"
        >
          <text class="service-icon">&#xe63f;</text>
          <text class="service-name">收货地址</text>
        </view>
        <view
          class="service-item"
          @tap="navigateTo('/pagesShop/supplier/supplierBy')"
          v-if="checkRoles('wx_supplierBind')"
        >
          <text class="service-icon">&#xe611;</text>
          <text class="service-name">供应商绑定</text>
        </view>
        <view class="service-item" @tap="navigateTo('/pagesShop/mine/setting')">
          <text class="service-icon">&#xe613;</text>
          <text class="service-name">设置</text>
        </view>
      </view>
    </view>

    <!-- 商家服务区 -->
    <view class="merchant-services">
      <view class="section-title">商家服务</view>
      <view class="merchant-items">
        <view
          class="merchant-item"
          @tap="navigateTo('/pagesShop/order/proxyUserOrder')"
          v-if="checkRoles('wx_singlewithUser')"
        >
          <image class="merchant-icon" src="@/static/switch_tabs/u48.svg" />
          <view class="merchant-name">代客下单</view>
        </view>
        <view
          class="merchant-item"
          @tap="navigateTo('/pagesShop/goods/goodsList')"
          v-if="checkRoles('wx_goods')"
        >
          <image class="merchant-icon" src="@/static/switch_tabs/u36.svg" />
          <view class="merchant-name">商品管理</view>
        </view>
        <view
          class="merchant-item"
          @tap="navigateTo('/pagesShop/store/storeInfo')"
          v-if="checkRoles('wx_storeInfo')"
        >
          <image class="merchant-icon" src="@/static/switch_tabs/u40.svg" />
          <view class="merchant-name">店铺信息</view>
        </view>
        <view
          class="merchant-item"
          @tap="navigateTo('/pagesShop/order/orderUserlist')"
          v-if="checkRoles('wx_storeSingle')"
        >
          <image class="merchant-icon" src="@/static/switch_tabs/u72.svg" />
          <view class="merchant-name">店铺订单</view>
        </view>
        <view
          class="merchant-item"
          @tap="navigateTo('/pagesShop/master/auditList')"
          v-if="checkRoles('wx_master')"
        >
          <image class="merchant-icon" src="@/static/switch_tabs/user.png" />
          <view class="merchant-name">师傅管理</view>
        </view>
        <view
          class="merchant-item"
          @tap="navigateTo('/pagesShop/paymoney/index')"
          v-if="checkRoles('wx_storePaymoney')"
        >
          <image class="merchant-icon" src="@/static/switch_tabs/u62.svg" />
          <view class="merchant-name">财务管理</view>
        </view>
      </view>
    </view>

    <!-- 退出登录按钮 -->
    <view class="logout-section">
      <button class="logout-btn" @tap="handleLogout">退出登录</button>
    </view>

    <!-- 底部 Tabbar -->
    <tabbar :currentIndex="currentIndex" @tabChange="handleTabChange"></tabbar>
  </view>
</template>

<script setup>
import { ref } from "vue";
import tabbar from "../components/tabbar.vue";
import { clearToken } from "@/utils/vmeitime-http/localStorage.js";
import { onShow } from "@dcloudio/uni-app";
import { getUserInfo, getShopStatisInfo } from "@/apiShop/mine.js";
import customHeader from "@/component/customHeader.vue";
import { formatNumber } from "@/utils/helper.js";

// 导航到其他页面
const navigateTo = (url) => {
  uni.navigateTo({
    url: url,
  });
};

const currentIndex = ref(2);
// 处理底部标签栏切换
const handleTabChange = (index) => {
  currentIndex.value = index;
  // 这里可以添加页面跳转逻辑
  switch (index) {
    case 0:
      uni.reLaunch({ url: "/pagesShop/store/storeHome" });
      break;
    case 1:
      uni.reLaunch({ url: "/pagesShop/cate/index" });
      break;
    case 2:
      uni.reLaunch({ url: "/pagesShop/mine/index" });
      break;
  }
};

// 退出登录
const handleLogout = () => {
  // 显示确认对话框
  uni.showModal({
    title: "提示",
    content: "确定要退出登录吗？",
    success: (res) => {
      if (res.confirm) {
        clearToken();
        // 跳转到登录页
        uni.reLaunch({
          url: "/pages/login/login",
        });
      }
    },
  });
};
const userInfo = ref({});
const getUserInfoDta = async () => {
  const res = await getUserInfo();
  userInfo.value = res;
};

const shopStatisInfo = ref({});
const getShopStatisInfoData = async () => {
  const res = await getShopStatisInfo();
  shopStatisInfo.value = res;
};
onShow(async () => {
  await getUserInfoDta();
  await getShopStatisInfoData();
});
</script>

<style lang="scss" scoped>
.mine-container {
  min-height: calc(90vh - 150rpx);
  background-color: #f5f5f5;
  padding-bottom: 100rpx; /* 为底部tabbar留出空间 */
}

.user-info-container {
  background: linear-gradient(135deg, #4a90e2, #67b8f7);
  padding: 40rpx 30rpx;

  .user-info {
    display: flex;
    align-items: center;

    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      border: 4rpx solid rgba(255, 255, 255, 0.3);
    }

    .user-details {
      margin-left: 30rpx;
      color: #ffffff;

      .username {
        font-size: 36rpx;
        font-weight: 500;
        margin-bottom: 10rpx;
      }

      .phone {
        font-size: 28rpx;
        opacity: 0.9;
      }
    }
  }
}

.my-services {
  background-color: #ffffff;
  margin-top: 20rpx;
  padding: 30rpx;

  .section-title {
    font-size: 30rpx;
    color: #333333;
    font-weight: 500;
    margin-bottom: 30rpx;
  }

  .service-items {
    display: flex;
    justify-content: flex-start;

    .service-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 25%;

      .service-icon {
        font-family: "gui-iconfont";
        font-size: 50rpx;
        color: #999999;
        margin-bottom: 15rpx;
      }

      .service-name {
        font-size: 26rpx;
        color: #666666;
      }
    }
  }
}

.logout-section {
  padding: 60rpx 30rpx;

  .logout-btn {
    background: linear-gradient(135deg, #4a90e2, #67b8f7);
    color: #ffffff;
    height: 90rpx;
    line-height: 90rpx;
    font-size: 32rpx;
    border-radius: 45rpx;
    border: none;
  }
}

.stats-section {
  background: #fff;
  border-radius: 0 0 30rpx 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
  margin-bottom: 20rpx;
  padding: 30rpx;
  min-height: 344rpx;
  .stats-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .shop-avatar {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }
    .shop-info {
      flex: 1;
      .shop-name {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }
      .shop-role {
        font-size: 24rpx;
        color: #bbb;
      }
    }
    .logout-link {
      color: #4a90e2;
      font-size: 26rpx;
      margin-left: 20rpx;
    }
  }
  .stats-data,
  .stats-money {
    display: flex;
    // justify-content: space-between;
    margin-top: 30rpx;
  }
  .stats-item,
  .money-item {
    width: 25%;
    text-align: center;
    .stats-num,
    .money-num {
      font-size: 32rpx;
      font-weight: bold;
      color: #4a90e2;
    }
    .stats-label,
    .money-label {
      font-size: 22rpx;
      color: #888;
      margin-top: 8rpx;
    }
  }
}
.merchant-services {
  background: #fff;
  margin-top: 20rpx;
  padding: 30rpx;
  border-radius: 20rpx;
  .section-title {
    font-size: 30rpx;
    color: #333333;
    font-weight: 500;
    margin-bottom: 30rpx;
  }
  .merchant-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    .merchant-item {
      width: 25%;
      margin-bottom: 30rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      .merchant-icon {
        width: 60rpx;
        height: 60rpx;
        margin-bottom: 10rpx;
      }
      .merchant-name {
        font-size: 26rpx;
        color: #666;
      }
    }
  }
}
</style>
